<template>
  <div class="top drag"></div>
  <div class="main">
    <div class="user">
      <div class="userimg">
        <el-avatar :size="60" :src="avatarName" shape="square" />
      </div>
      <div class="user-info">
        <div class="nick-name">
          <span>{{ userInfo.nickName }}</span>
          <span :class="['iconfont sex', userInfo.sex === 1 ? 'icon-man' : 'icon-woman']"></span>
        </div>
        <div class="info">甜蜜账号：{{ userInfo.userSweetCircleId }}</div>
        <div class="info">地区：{{ userInfo.areaName }}</div>
      </div>
      <div class="more2" title="更多"><span class="iconfont icon-more"></span></div>

    </div>
    <div class="note">
      <!--      TODO 请填写备注信息-->
      <span class="b">备注</span><span class="c">{{}}</span>
    </div>
    <div class="note">
      <!--      TODO 请填写备注信息-->
      <div>
        <span class="b">个性签名</span><span class="c">{{ userInfo.personalSignature }}</span>
      </div>
      <div class="cc"><span class="bb">来源</span><span class="c"></span></div>
    </div>
    <div class="ff">
      <div class="dd" @click="">
        <span class="iconfont icon-chat2"></span>
        <span>发消息</span>
      </div>
      <div class="dd" @click="">
        <span class="iconfont icon-dianhua3"></span>
        <span>语音聊天</span>
      </div>
      <div class="dd" @click="">
        <span class="iconfont icon-shexiangtou"></span>
        <span>视频聊天</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import Tool from '#/utils/Tool'
import { computed, ref } from 'vue'
import { useContactPersonInfoStore } from '#/stores/ContactPersonInfoStore'

const contactPersonInfoStore = useContactPersonInfoStore()  // 存储联系人信息
const route = useRoute()
const router = useRouter()


// 计算属性  返回路由参数的值
const userInfo = computed(() => {
  return contactPersonInfoStore.getContactPersonInfo()
})
const avatarName = ref(Tool.getAvatar(userInfo.userId, userInfo.avatar))  // 头像名字

// todo  设置联系人信息

// 创建计算属性 a

// 监视 路由参数 动态更新数据
// watch(
//   () => route.query.userInfo,
//   (newVal, oldVal) => {
//     if (newVal) {
//       userInfo.value = JSON.parse(Tool.base64ToString(newVal))
//     }
//   },
//   { immediate: true, deep: true }
// );
</script>
<style lang="scss" scoped>
.top {
  height: 60px;
}

.main {
  padding-top: 100px;
  margin: auto;

  height: calc(100vh - 60px);
  width: 400px;

  .user {
    padding-bottom: 20px;
    display: flex;
    border-bottom: 1px solid #b6b6b6;
  }

  .userimg {
    margin-right: 10px;
  }

  .user-info {
    flex: 1;
    font-size: 16px;

    .nick-name {
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #000000;

      .icon-man {
        color: #2cb6fe;
      }

      .icon-woman {
        color: #fb7373;
      }
    }

    .info {
      font-size: 12px;
      color: #9e9e9e;
      margin-top: 3px;
    }
  }

  .more2 {
    width: 25px;
    height: 25px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;


    &:hover {
      background-color: #e0e0e0;

    }
  }

  .note {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #b6b6b6;

    .b {
      color: #8c8c8c;
      margin-right: 10px;
    }

    .bb {
      color: #8c8c8c;
      margin-right: 38px;
    }

    .c {
      color: #000000;
    }

    .cc {
      margin-top: 10px;
    }
  }
}

.dd {
  margin: 15px;
  width: 80px;
  height: 50px;
  align-items: center;
  display: flex;
  flex-direction: column;
  color: #566a95;

  .iconfont {
    font-size: 20px;
    margin: 5px;
  }

  span {
    font-size: 12px;
  }

  &:hover {
    background-color: #e0e0e0;
  }

}

.ff {
  display: flex;
  justify-content: center;
  user-select: none;
}


</style>
